<template>
	<view>
		<u-navbar back-icon-color="#f1f1f1" title-color="#f1f1f1" title="新增收货地址" :background="navbarBackground"></u-navbar>
		<view class="main">
			<view class="form">
				<view class="item">
					<text class="label">姓名</text>
					<input v-model="username" placeholder="请输入姓名" />
				</view>
				<view class="item">
					<text class="label">联系方式</text>
					<input type="number" v-model="phone" placeholder="请输入11位有效手机号码" />
				</view>
				<view class="item">
					<text class="label">地区</text>
					<view class="input" @click="showRegion = true">
						<input v-model="region" disabled placeholder="请选择收货人地区" @click="showRegion = true" />
						<u-icon size="30" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="item">
					<text class="label">详细地址</text>
					<input v-model="address" placeholder="请输入详细地址" />
				</view>
				<view class="item">
					<text class="label">邮政编号</text>
					<input :custom-style="inputStyle" type="number" v-model="postalID" placeholder="请输入邮政编号" />
				</view>
			</view>
			<view class="btns"><u-button class="btn" :custom-style="btnStyle" :ripple="true" ripple-bg-color="#8EB7FA" @click="handleSave">保存</u-button></view>
		</view>
		<u-picker mode="region" title="选择地区" v-model="showRegion" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			btnStyle: {
				backgroundColor: '#3d6fc1',
				color: '#f1f1f1'
			},
			showRegion: false,
			username: '', // 姓名
			phone: '', // 手机号
			region: '', // 地区
			address: '', // 详细地址
			postalID: '' // 邮政编号
		};
	},
	onLoad(option) {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	methods: {
		confirm(e) {
			this.region = e.province.label + e.city.label + e.area.label;
		},
		handleSave() {
			if (this.username == '') {
				uni.showToast({
					title: '请输入姓名',
					icon: 'none'
				});
				return false;
			} else if (!this.$u.test.mobile(this.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return false;
			} else if (this.region == '') {
				uni.showToast({
					title: '请选择地区',
					icon: 'none'
				});
				return false;
			} else if (this.address == '') {
				uni.showToast({
					title: '请输入详细地址',
					icon: 'none'
				});
				return false;
			} else if (!/^[0-8][0-7]\d{4}$/.test(this.postalID)) {
				uni.showToast({
					title: '请输入正确的邮政编号',
					icon: 'none'
				});
				return false;
			} else {
				let params = {
					name: this.username,
					mobile: this.phone,
					address: this.region + '-' + this.address,
					postcode: this.postalID
				};
				this.$tkRequest('/api/Address/add', params, 'POST').then(res => {
					uni.showToast({
						title: res.msg
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	.form {
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx $uni-spacing-row-lg;
			background-color: #fff;
			z-index: 100;

			.label {
				width: 25%;
				font-size: 12pt;
			}

			.input {
				flex: 1;
				display: flex;
				align-items: center;
			}

			input {
				flex: 1;
			}
		}
	}
	.btns {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
	}
}
</style>
